<template>
  <div id='tmpl'>
        <h3>评论内容</h3>
        <p></p>
        <textarea placeholder="请输入您的评论" v-model="mycontent"></textarea>
        <mt-button type='primary' size='large' @click="send">
            发表
        </mt-button>
		<div id="list">
			<h3>评论列表</h3>
			<p class="p"></p>
			<div v-for="(item,index) in list" :key="index">
				<div class="title">
					<span>第{{index + 1}}楼:</span>
					<span>用户：{{item.user_name}}</span>
					<span>发表时间：{{item.add_time | datefmt('YYYY-MM-DD HH:mm:ss')}}</span>
				</div>
				<ul class="mui-table-view">
					<li class="mui-table-view-cell" v-text="item.content"></li>
				</ul>
			</div>
		</div>
		  <mt-button type="danger" size="large" plain @click="getmore">加载更多</mt-button>  

  </div>
</template>
<script>
import {Toast} from "mint-ui";
export default {
  props:["id"],
  data () {
    return {
        mycontent:'',
        pageIndex:1,
        list:[]
    };
  },methods:{
      send(){
          if(this.mycontent.trim().length<=0){
              Toast("你的评论不能为空");
              return;
          }
          var url = "http://www.lovegf.cn:8899/api/postcomment/"+this.id;
          this.$http.post(url,{content:this.mycontent},{emulateJSON:true}).then(function(res){
              Toast(res.body.message);
              this.list = [{
                    "user_name": "匿名用户",
                    "add_time": new Date(),
                    "content": this.mycontent
                }].concat(this.list);
                
                this.mycontent = '';
          })
      },get(pageIndex){
           pageIndex = pageIndex || 1;
          var url = "http://www.lovegf.cn:8899/api/getcomments/"+this.id+"?pageindex="+pageIndex;
           
          this.$http.get(url).then(function(res){
          
            if(res.body.status!=0){
                Toast(res.body.message);
                return;
            }
            this.list = this.list.concat(res.body.message);
          })
      },getmore(){
          this.pageIndex++;
          this.get(this.pageIndex);
      }
  },created(){
       this.get();
  }
}
</script>
<style lang="css" scoped>


</style>